<template>
  <view class="employee-list-container">
    <!-- 顶部导航栏 -->
    <!-- <view class="top-bar">
      <text class="title">员工列表</text>
      <view class="right-icon" @click="handleBack">
        <image src="/static/xiugai07_1.png" mode="aspectFit" class="back-icon"></image>
      </view>
    </view> -->

    <!-- 员工列表 -->
    <view class="employee-items">
      <view class="employee-item" v-for="(employee, index) in employees" :key="employee.id">
        <!-- 员工基本信息 -->
        <view class="employee-info" @click="viewEmployeeDetail(employee.id)">
          <!-- 头像 -->
          <view class="avatar-container">
            <image :src="employee.user?.avatar || '/static/Icon.png'" mode="aspectFill" class="avatar"></image>
          </view>
          
          <!-- 详细信息 -->
          <view class="info-details">
            <view class="name-level">
              <text class="employee-name">{{  employee.name || employee.user?.nickname || '未知' }}</text>
              <text class="employee-level">{{ employee.job?.name || '未知职位' }}</text>
            </view>
            <text class="employee-phone">{{ employee.user?.mobile || '暂无电话' }}</text>
          </view>
        </view>
        
        <!-- 操作按钮 -->
        <view class="action-buttons">
          <view class="action-button edit-button" @click="editEmployee(employee.id)">
            <image src="/static/xiugai07_1.png" mode="aspectFit" class="action-icon"></image>
            <text class="action-text">修改</text>
          </view>
          <view class="action-button delete-button" @click="deleteEmployee(employee.id)">
            <image src="/static/shanchu_1.png" mode="aspectFit" class="action-icon"></image>
            <text class="action-text">删除</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 分页 -->
    <view class="pagination">
      <button class="page-btn" @click="prevPage" :disabled="page === 1">上一页</button>
      <text class="page-info">{{ page }}/{{ totalPages }}</text>
      <button class="page-btn" @click="nextPage" :disabled="page === totalPages">下一页</button>
    </view>
    
    <!-- 添加员工按钮 -->
    <view class="add-button-container">
      <button class="add-button" @click="addEmployee">
        <image src="/static/tianjia_2.png" mode="aspectFit" class="add-icon"></image>
        <text class="add-text">添加员工</text>
      </button>
    </view>
  </view>
</template>

<script>
import store from '@/store'

export default {
  data() {
    return {
      employees: [],
      total: 0,
      perPage: 10,
      page: 1,
      totalPages: 1
    };
  },
  onShow() {
    this.init();
  },
  methods: {
    async init() {
      try {
        await this.getEmployeeList();
      } catch (error) {
        console.error('获取员工列表失败:', error);
        uni.showToast({
          title: '获取员工列表失败',
          icon: 'none'
        });
      }
    },
    
    // 获取员工列表
    async getEmployeeList() {
      const params = {
        limit: this.perPage,
        page: this.page
      };
      
      const res = await this.$request({
        url: '/emp/index',
        method: 'GET',
        params: params
      });
      
      if (res.code === 1) {
        this.employees = res.data.data;
        this.total = res.data.total;
        this.perPage = res.data.per_page;
        this.page = res.data.current_page;
        this.totalPages = res.data.last_page;
      } else {
        throw new Error(res.msg || '获取员工列表失败');
      }
    },
    
    // 上一页
    prevPage() {
      if (this.page > 1) {
        this.page--;
        this.getEmployeeList();
      }
    },
    
    // 下一页
    nextPage() {
      if (this.page < this.totalPages) {
        this.page++;
        this.getEmployeeList();
      }
    },
    
    // 返回上一页
    handleBack() {
      uni.navigateBack();
    },
    
    // 添加员工
    addEmployee() {
      uni.navigateTo({
        url: '/pages/employeelist/compontens/empedit'
      });
    },
    
    // 编辑员工
    editEmployee(id) {
      uni.navigateTo({
        url: `/pages/employeelist/compontens/empedit?ids=${id}`
      });
    },
    
    // 查看员工详情
    viewEmployeeDetail(id) {
      uni.navigateTo({
        url: `/pages/employeelist/compontens/empdetail?ids=${id}`
      });
    },
    
    // 删除员工
    deleteEmployee(id) {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除该员工吗？',
        success: async (res) => {
          if (res.confirm) {
            try {
              await this.performDelete(id);
              // 重新获取列表
              this.getEmployeeList();
            } catch (error) {
              console.error('删除员工失败:', error);
              uni.showToast({
                title: '删除失败',
                icon: 'none'
              });
            }
          }
        }
      });
    },
    
    // 执行删除操作
    async performDelete(id) {
      const res = await this.$request({
        url: '/emp/del',
        method: 'POST',
        data: {
          ids: id
        }
      });
      
      if (res.code === 1) {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
      } else {
        throw new Error(res.msg || '删除失败');
      }
    }
  }
};
</script>

<style scoped>
.employee-list-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 30rpx;
  padding-top: 40rpx;
}

/* 顶部导航栏 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 40rpx 30rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: relative;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.back-icon {
  width: 40rpx;
  height: 40rpx;
}

/* 添加按钮 */
.add-button-container {
  padding: 30rpx;
}

.add-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #4cd964;
  color: #fff;
  border-radius: 20rpx;
  padding: 20rpx;
  font-size: 28rpx;
  border: none;
  width: 100%;
}

.add-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

/* 员工列表 */
.employee-items {
  padding: 0 30rpx;
}

.employee-item {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.employee-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar-container {
  margin-right: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 2rpx solid #eee;
}

.info-details {
  flex: 1;
}

.name-level {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.employee-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-right: 15rpx;
}

.employee-level {
  font-size: 24rpx;
  color: #fff;
  background-color: #4cd964;
  padding: 4rpx 16rpx;
  border-radius: 10rpx;
}

.employee-phone {
  font-size: 28rpx;
  color: #666;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  justify-content: flex-end;
  border-top: 1rpx solid #eee;
  padding-top: 20rpx;
}

.action-button {
  display: flex;
  align-items: center;
  margin-left: 40rpx;
}

.action-icon {
  width: 28rpx;
  height: 28rpx;
  margin-right: 8rpx;
}

.edit-button .action-text {
  color: #007aff;
}

.delete-button .action-text {
  color: #ff3b30;
}

.action-text {
  font-size: 28rpx;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
}

.page-btn {
  flex: 1;
  margin: 0 10rpx;
  background-color: #fff;
  color: #333;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
}

.page-btn:disabled {
  background-color: #f2f2f2;
  color: #999;
}

.page-info {
  font-size: 28rpx;
  color: #333;
  padding: 0 20rpx;
}
</style>